<template>
  <a-config-provider :locale="locale">
    <router-view></router-view>
  </a-config-provider>
</template>

<script setup>
import zh from "ant-design-vue/es/locale/zh_CN";
import en from "ant-design-vue/es/locale/en_US";
import useLangStore from "./store/lang";
import { watch } from "vue";
import setTitle from "./utils/setTitle";
import { useRoute } from "vue-router";
const langStore = useLangStore();
const router = useRouter();
const langs = {
  zh,
  en,
};
const locale = ref(langs[langStore.lang]);
// 监听当langStore的lang值变化,修改locale的值
const route = useRoute();
watch(
  () => langStore.lang,
  () => {
    locale.value = langs[langStore.lang];
    setTitle(route);
  }
);
// 动态网站标题切换
// 1.监听路由以及中英切换
watch(
  () => router.currentRoute.value,
  () => {
    // 获取当前router的meta.title =>国际化配置取
    setTitle(route);
  }
);
</script>

<style scoped>
body,
#app {
  height: 100vh;
}
</style>
